<template>
  <div class="search-container">
    <el-form
      ref="formRef"
      :model="form"
      :label-width="formInfo.labelWidth || ''"
      class="demo-ruleForm"
      :label-position="formInfo.labelPosition || 'right'"
      :size="formInfo.formSize || 'default'"
      :disabled="formInfo.disabled || false"
    >
      <el-row
        :gutter="formInfo.rowGutter || 20"
        v-if="formInfo.formItems.length > 0"
      >
        <template v-for="(item, index) in formInfo.formItems" :key="index">
          <!-- input -->
          <el-col
            v-if="item.type == 'input'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
              :label-width="item.labelWidth || ''"
            >
              <el-input
                :placeholder="item.placeholder || '请输入'"
                v-model="form[item.prop]"
                :maxlength="item.maxlength || ''"
                :show-word-limit="item.maxlength ? true : false"
                :clearable="item.clearable || true"
                :show-password="item.showPassword || false"
                :disabled="item.disabled || false"
                :size="item.size || 'default'"
                :input-style="item.inputStyle || {}"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- input-number -->
          <el-col
            v-if="item.type == 'input-number'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-input-number v-model="form.code" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <!-- select -->
          <el-col
            v-if="item.type == 'select'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="全部" value="全部"></el-option>
                <el-option label="全部" value="全部"></el-option>
                <el-option label="全部" value="全部"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- radio -->
          <el-col
            v-if="item.type === 'radio'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-radio-group v-model="form.type" class="ml-4">
                <el-radio label="1" size="large">Option 1</el-radio>
                <el-radio label="2" size="large">Option 2</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            v-if="item.type === 'checkbox'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <!-- checkbox -->
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-checkbox-group v-model="form.type" class="ml-4">
                <el-checkbox label="1" size="large">Option 1</el-checkbox>
                <el-checkbox label="2" size="large">Option 2</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col
            v-if="item.type === 'date-picker'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <!-- date-picker -->
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                class="ml-4"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col
            v-if="item.type == 'date-time-picker'"
            :span="formInfo.inline ? 24 : item.span ? item.span : 6"
          >
            <!-- date-time-picker -->
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :rules="item.rules"
            >
              <el-date-picker
                v-model="form.value4"
                type="datetime"
                placeholder="选择日期时间"
                class="ml-4"
                :picker-options="pickerOptions2"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </template>
        <el-col
          :span="6"
          v-if="
            formInfo.formType &&
            formInfo.formType == 'search' &&
            formInfo.buttonGroup &&
            formInfo.buttonGroup.length > 0
          "
        >
          <el-button
            v-for="(button, index) in formInfo.buttonGroup"
            :key="index"
            :type="button.type"
            :size="button.size || 'default'"
          >
            {{ button.text }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <div
    class="submit-button-group"
      v-if="
        formInfo.formType &&
        formInfo.formType == 'submit' &&
        formInfo.buttonGroup &&
        formInfo.buttonGroup.length > 0
      "
    >
      <el-button
        v-for="(button, index) in formInfo.buttonGroup"
        :key="index"
        :type="button.type"
        :size="button.size || 'default'"
        @click="submitForm(button.submitApi)"
      >
        {{ button.text }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  formInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const formRef = ref(null);
const form = ref({});


//提交
const submitForm = (apis:void) => {
  formRef.value.validate((valid) => {
    if (valid) {
      apis(form.value).then(() => {
        formRef.value.resetFields();
      });
    } else {
      return false;
    }
  });
};
</script>


<style scoped>
.submit-button-group{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>